<template>
	<TabGrayEasyCard :title="'收缴率'" @onMore="goDetail(props.permi)" :tabs="card.tabs" :curTab="card.curTab" :tabRight="card.tabRight" @onChange="changeTab" :grayCardList="card.grayCardList" :lineText="''" :barText="''" :unitText="`${card.unitText}`" :updateText="card.updateText" v-btnPermi="{ permi: props.permi, noReport: true, isHiden: true, hideList: props.hideList }">
		<slot>
			<el-table :data="card.tableData" height="100%">
				<el-table-column label="楼层" prop="floorsName" :align="'center'" min-width="90" show-overflow-tooltip />
				<el-table-column label="应收" :align="'right'" show-overflow-tooltip>
					<template #default="scope">
						{{ toThousands(scope.row.invRecAmtL) }}
					</template>
				</el-table-column>
				<el-table-column label="实收" :align="'right'" show-overflow-tooltip>
					<template #default="scope">
						{{ toThousands(scope.row.invIncomeAmtL) }}
					</template>
				</el-table-column>
				<el-table-column label="收缴率" :align="'right'" show-overflow-tooltip>
					<template #default="scope"> {{ toThousands(scope.row.collectionRate) }}% </template>
				</el-table-column>
			</el-table>
		</slot>
	</TabGrayEasyCard>
</template>

<script setup>
	import TabGrayEasyCard from '@/DbComponents/tabGrayEasyCard';
	import dashBoardApi from '@/api/Manage/Business/dashBoard';
	import { toThousands } from '@/utils/number-util';
	import { reactive, watch, ref } from 'vue';
	import { reportLog } from '@/utils/reportLog';
	import { useRouter } from 'vue-router';
	const router = useRouter();
	const props = defineProps({
		permi: {
			type: String,
			required: false,
			default: '',
		},
		hideList: {
			type: Array,
			required: false,
		},
		biProjectCode: {
			type: String,
			required: false,
			default: '',
		},
	});

	const card = reactive({
		tabs: [
			{ label: '当年', value: '当年' },
			{ label: '历史', value: '历史' },
			{ label: '全部', value: '全部' },
		],
		curTab: '当年',
		tabRight: '',
		grayCardList: [
			{ label: '应收', value: '', unit: '万', color: '' },
			{ label: '实收', value: '', unit: '万', color: '' },
			{ label: '收缴率', value: '', unit: '%', color: '' },
		],
		unitText: '',
		updateText: '',
		tableData: [],
	});

	const statDate = ref('');
	const endDate = ref('');
	const getCardData = async () => {
		let res = await dashBoardApi.collectionRateCardListApi({ projectCode: props.biProjectCode, cardType: card.curTab });
		if (res.data.code != 200) return;
		let cardTopRow = res.data.data.arrCardList && res.data.data.arrCardList.length > 0 ? res.data.data.arrCardList[0] : {};
		card.tabRight = cardTopRow.timeType;
		statDate.value = cardTopRow.statDate;
		endDate.value = cardTopRow.endDate;
		card.grayCardList[0].value = cardTopRow.invRecAmtL;
		card.grayCardList[1].value = cardTopRow.invIncomeAmtL;
		card.grayCardList[2].value = cardTopRow.collectionRate;
		card.tableData = res.data.data.arrTableList || [];
	};

	const goDetail = permi => {
		reportLog({
			type: 4,
			resourceKey: permi,
		});
		router.push({
			path: '/page/routeController/index',
			query: {
				rid: 'Property_DashBoard_CollectionRate_Contract',
				rTitle: '收缴率报表',
				projectCode: props.biProjectCode,
				statDate: statDate.value,
				endDate: endDate.value,
			},
		});
	};
	const changeTab = value => {
		card.curTab = value;
		getCardData();
	};

	watch(
		() => props.biProjectCode,
		() => {
			getCardData();
		},
		{ immediate: true },
	);
</script>

<style scoped lang="scss"></style>
